<%@ page import="java.util.List" %>
<%@ page import="com.online_video.entity.CollectBook" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    User user = (User) session.getAttribute("user");
    System.out.println(user);
%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/sweetalert.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/history.css">
    <link rel="stylesheet" href="../css/collection.css">
</head>
<body>
<!--导航条-->
<%@include file="plugins/navbar.jsp" %>

<div class="container" style="margin-top: 60px;">
    <div class="page-header">
        <h1>我的收藏夹 <small>My Collection</small></h1>
    </div>
    <div class="col-lg-3 list-group" id="collDiv">
        <p href="#" class="list-group-item active">
            创建收藏夹
            <button class="btn btn-info btn-info-update addCollectionBtn" data-toggle="modal"
                    data-target="#collectModal"><img src="../webImg/加.png"/>
            </button>
        </p>


    </div>

    <!-- <div>
        <button class="col-lg-8 btn btn-primary" type="button">我的收藏夹</button>
    </div> -->

    <div class="col-lg-8">
        <span class="col-lg-2 label label-default">时间</span>
        <span class="col-lg-8 label label-primary">内容</span>
        <span class="col-lg-2 label label-success">操作</span>
    </div>

    <div class="col-lg-8">
        <table class="table table-striped">
            <tbody id="colltbody">
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="collectModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" id="close" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">创建收藏夹</h4>
            </div>
            <div class="modal-body">
                <form>
                    <input type="text" id="createColl" name="c_book_name"/>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
    $(function () {
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
        })

    })
</script>
<script type="text/javascript">

    $(function () {
        $.ajax({
            async: true,
            url: "./video.do?action=queryCollectBookById",
            dataType: 'text',
            success: function (data) {
                if (data != "") {
                    var jsonObj = JSON.parse(data);
                    for (var i = 0; i < jsonObj.length; i++) {
                        $('#collDiv').append('        <a name="' + jsonObj[i].c_book_id + '" onclick="queryBook(' + jsonObj[i].c_book_id + ')" href="#" class="list-group-item">' + jsonObj[i].c_book_name + '</a>\n')
                    }
                }
            }
        })

        $('#saveBtn').click(function () {
            if ($('#createColl').val() != "") {
                $.ajax({
                    async: true,
                    url: "./video.do?action=isExitCollectBook",
                    data: {"collectName": $('#createColl').val()},
                    dataType: 'text',
                    success: function (data) {
                        if (data != "") {
                            var jsonStr = JSON.parse(data);
                            if (jsonStr == "-1") {
                                swal({
                                    title: '该收藏夹已存在',
                                    icon: 'error',
                                    text: '该收藏夹已存在',
                                    confirmButtonText: "确定",
                                })
                            } else {
                                $newColl = $('#createColl').val();
                                $('#collDiv').append('        <a id="collbook" href="#" class="list-group-item">' + $newColl + '</a>\n');
                                $('#close').click()
                                swal({
                                    title: '添加成功',
                                    icon: 'success',
                                    text: '添加成功',
                                    confirmButtonText: "确定",
                                })

                            }

                        }
                        $('#close').click()
                    }
                })
            }
        })

    })

</script>
<script type="text/javascript">
    function queryBook(queryBookId) {
        $.ajax({
            async: true,
            url: "./video.do?action=collectBook",
            data: {"c_book_id": queryBookId},
            dataType: 'text',
            success: function (data) {
                $('#colltbody').empty();
                if (data != "") {
                    var jsonObj = JSON.parse(data);
                    // console.log(jsonObj)
                    for (var i = 0; i < jsonObj.length; i++) {
                        $('#colltbody').append('<tr>\n' +
                            '                <td class="col-lg-2 dateDiv">\n' +
                            '                    <h4>' + jsonObj[i].c_date + '</h4>\n' +
                            '                </td>\n' +
                            '                <td class="col-lg-8">\n' +
                            '                    <div class="media">\n' +
                            '                        <div class="media-left">\n' +
                            '                            <a href="./v.jsp?vid=' + jsonObj[i].vid + '">\n' +
                            '                                <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="/online_video/img/' + jsonObj[i].img + '"\n' +
                            '                                     data-holder-rendered="true"\n' +
                            '                                     style="width: 64px; height: 64px;">\n' +
                            '                            </a>\n' +
                            '                        </div>\n' +
                            '                        <div class="media-body">\n' +
                            '                            <h4 class="media-heading">' + jsonObj[i].viName + '</h4>\n' +
                            '                            <div>\n' +
                            '                                <h5>观看时长：2</h5>\n' +
                            '                                <h5>up主：' + jsonObj[i].nickname + '</h5>\n' +
                            '                                <h5>类型：' + jsonObj[i].category + '</h5>\n' +
                            '                            </div>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                </td>\n' +
                            '                <td class="col-lg-2">\n' +
                            '                    <a href="#"><img onclick="del(' + jsonObj[i].collectid + ')" id="' + jsonObj[i].collectid + '" class="delImg" data-src="holder.js/64x64" alt="64x64" src="../webImg/删除.png"></a>\n' +
                            '                </td>\n' +
                            '            </tr>');
                    }
                }
                // else {
                //     alert("暂无数据");
                // }
            },
        })
    }
</script>

<script type="text/javascript">
    function del(collectid) {
        swal({
            title: "确认删除吗?",
            text: "删除后的数据无法恢复！",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
            .then((willDelete) => {
                if (willDelete) {
                    console.log(collectid)
                    $.ajax({
                        async: true,
                        url: "./video.do?action=delCollectVideo",
                        data: {"collectid": collectid},
                        dataType: 'text',
                        success: function (data) {
                            if (data != null) {
                                var jsonObj = JSON.parse(data)
                                if (jsonObj == "1") {
                                    $('#' + collectid + '').parent().parent().parent().remove()
                                    swal("删除成功", {
                                        icon: "success",
                                    });
                                }
                            }
                        }
                    })
                }
            });
    }
</script>

</body>
</html>
